<template lang="pug">
  el-drawer.commonDrawer(
    :title="types === 'add' ? '新增收费账号' : '修改收费账号'"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="640px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="basicForm"
        :fields="basicField"
        :showBtns="false"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 确定
</template>
<script>
import { addFinAccount } from './api'

export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => ({})
    },
    types: {
      type: String,
      default: 'add'
    }
  },
  data () {
    return {
      submitting: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    basicField () {
      const { info } = this
      return [
        {
          label: '账户类型',
          key: 'accountType',
          type: 'select',
          fieldProps: {
            options: [
              { id: 1, name: '微信' },
              { id: 2, name: '支付宝' }
            ]
          },
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.accountType
        },
        {
          label: '账户名称',
          key: 'name',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.name
        },
        {
          label: 'AppId',
          key: 'appId',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.appId
        },
        {
          label: 'AppSecret',
          key: 'appSecret',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.appSecret
        },
        {
          label: '商户号',
          key: 'mchId',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.mchId
        },
        {
          label: '商户密钥',
          key: 'mchKey',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.mchKey
        },
        {
          label: '是否启用',
          key: 'enabled',
          type: 'switch',
          rules: [{ required: true, message: '请选择' }],
          initialValue: info.enabled || false
        }
      ]
    }
  },
  watch: {
    visible (val) {
      console.log(`visible${val}`)
    }
  },
  created () {},
  methods: {
    // 提交
    async submitHandle () {
      const values = await this.$refs.basicForm.submitForm()
      console.log(values)
      this.submitting = true
      addFinAccount({
        ...values
      })
        .then(() => {
          this.$emit('getList')
          this.$_handleCancel()
          this.$message.success('保存成功')
        })
        .finally(() => {
          this.submitting = false
        })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
